<template>
  <div class="previewComponent">
    <div class='containerPreview'>
      <div class='left'></div>
      <div class='center'>
        <h2 class='previewTitle'>{{articleTitle}}</h2>
        <p class='previewInfo'><span class="previewSpanAuthor">{{issueDate}}</span><span class="previewSpan">作者：{{author}}</span></p>
        <div v-html="contentData">
          {{contentData}}
        </div>
      </div>
      <div class='left'></div>
    </div>
  </div>
</template>
<script>
  import {
    Dialog,
    Table,
    TableColumn,
    Pagination,
    MessageBox,
    Message,
    Drawer,
    Tabs,
    TabPane,
    Upload,
    Alert
  } from 'element-ui'
  import { examineForm } from '@/api/homepage/homepage.js'
  export default {
    data() {
      return {
        contentData: "",
        articleTitle: '',
        author: '',
        issueDate: ''
      }
    },
    created() {
      this.examineFormData(this.$route.query.id)
    },
    methods: {
      examineFormData(articleId) { //内容信息数据源
        examineForm(articleId).then(res => {
          if (res.data.code == 10000) {
            this.contentData = res.data.data.content
            this.articleTitle = res.data.data.articleTitle
            this.author = res.data.data.author
            this.issueDate = res.data.data.issueDate
          }
        })
      },
    }
  }
</script>
<style lang="scss">
.previewComponent {
  height: 100%;
  background-color: #ffffff;
  .containerPreview {
    width: 100%;
    display: flex;
    margin-bottom: 20px;

    .right,
    .left {
      flex: 1;
    }

    .center {
      width: 1200px;

      .previewTitle {
        font-size: 26px;
        margin-bottom: 14px;
        margin-top: 54px;
        text-align: center
      }

      .previewInfo {
        text-align: center;
        margin-bottom: 30px;

        .previewSpan {
          color: #666666;
          margin: 0 10px;
        }

        .previewSpanAuthor {
          color: #666666;
          padding-right: 20px;
        }
      }
    }
  }
}
</style>
